<template>
  <checkDetail
    v-if="detailVisible"
    @changeDetailVisible="changeDetailVisible"
    :detail="detailObj"
  ></checkDetail>

  <div class="zy-content" v-else>
    <search
      :columns="searchData"
      @getSearch="getSearch(arguments)"
      key="search"
    ></search>
    <div class="list-layout mt16">
      <div class="btns clear">
        <span class="title">{{ $t("common.listInformation") }}</span>
        <Button @click="exportMaintainTask" v-has="'dcmMaintainTaskExport'">
          {{ $t("maintenance.Export") }}</Button
        >
        <Button @click="getTableColumns(columns)">{{
          handleContextMenuStatus ? $t("显示操作栏") : $t("隐藏操作栏")
        }}</Button>
      </div>
      <div class="tableContent">
        <Table
          border
          class="resizable-table"
          @on-column-width-resize="onColumnWidthResize"
          ellipsis
          ref="selection"
          :columns="columnsList"
          :data="data"
          @on-selection-change="onSelectChange"
        >
          <template slot-scope="{ row }" slot="action">
            <span
              v-has="'dcmMaintainTaskQueryById'"
              class="operationBtn"
              @click="edit(row)"
              >{{ $t("common.Check") }}</span
            >
          </template>
        </Table>
      </div>
      <div class="pageWrap mt16">
        <pageLeftTitle :total="total" :selected="ids.length" />
        <Page
          :total="total"
          :page-size="pageSize"
          :page-size-opts="$variable.pageSizes"
          :current="pageNum"
          @on-change="changePageNum"
          @on-page-size-change="changePageSize"
          show-sizer
          show-total
        />
      </div>
    </div>

    <Modal :mask-closable="false" v-model="delFaultCodeShowF" title="">
      <Row class="enableContent">
        <Col span="24" class="enableContentInner">
          <img width="95px" src="~images/event/del.png" alt="" />
        </Col>
        <Col span="24" class="enableTips">
          <span
            >删除后不会影响已经生成的点检任务，但不会继续生成任务，是否确认删除？</span
          >
        </Col>
      </Row>
      <div slot="footer">
        <Button type="default" @click="delFaultCodeShowF = false">{{
          $t("common.Cancle")
        }}</Button>
        <Button type="primary" @click="deleteOk" :loading="delLoading"
          >{{ $t("maintenance.Confirmed") }}
        </Button>
      </div>
    </Modal>

    <Modal :mask-closable="false" v-model="caseStatus" :title="caseText">
      <div class="contentBox">
        <span class="title">{{ $t("maintenance.casereson") }}</span>
        <Input
          v-model="caseEndReason"
          type="textarea"
          :rows="4"
          placeholder="请填写结案原因..."
        />
      </div>
      <div slot="footer">
        <Button type="default" @click="caseStatus = false">{{
          $t("common.Cancle")
        }}</Button>
        <Button type="primary" @click="caseOk">{{
          $t("maintenance.Confirmed")
        }}</Button>
      </div>
    </Modal>
    <signle-common-modal
      ref="signleCommonModal"
      @handleRefresh="handleRefresh"
    />
  </div>
</template>

<script>
import fileDownload from "js-file-download";
import allotModal from "./management/allotModal.vue";
import checkDetail from "./management/checkDetail.vue";
import signleCommonModal from "../repair/modules/signleCommonModal";
import toggleTableOperation from "@/mixins/toggleTableOperation";
import search from "@/components/curd/searchList.vue";
import { del } from "vue";
const statusList = [
  { label: "待分配", value: "0" },
  { label: "待点检", value: "1" },
  { label: "待确认", value: "4" },
  { label: "已结单", value: "2" },
  { label: "已过期", value: "3" },
];
export default {
  name: "MaintenanceTaskManagement",
  mixins: [toggleTableOperation],
  components: {
    signleCommonModal,
    search,
    allotModal,
    checkDetail,
  },
  activated() {
    this.searchList();
  },
  created() {
    this.getTableColumnsWidth(this.columns);
    let url = window.location.href.split("?")[1]; //获取url中"?"符后的字串
    let strs = url ? url.split("&") : [];
    let theRequest = new Object();
    for (let i = 0; i < strs.length; i++) {
      theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
    }
    this.searchParams.deviceMId = theRequest.deviceMId;
    this.searchList();
    this.getFaultCategory("设备类型");
    // this.getDeviceList()
  },
  data() {
    return {
      searchData: [
        // {
        //   title: "所属公司",
        //   key: "affiliatedCompany",
        //   type: "select",
        //   dicUrl: "/basic/company/getCompanyListByUser",
        //   params:{
        //     value:'name',
        //     label:'name'
        //   }
        // },
        {
          title: "安装位置",
          key: "workShop",
          type: "cascader",
          dicUrl: "/basic/organization/findListByToken?level=0",
          params: {
            label: "name",
            value: "code",
            children: "children",
          },
        },
        {
          title: "任务状态",
          key: "status",
          type: "select",
          dicData: statusList,
        },
        {
          title: "点检计划",
          key: "planName",
          dicUrl: "/dms/devSpotCheckPlan/getDevSpotCheckPlanList",
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            status: 0,
          },
          type: "search",
          resultParams: "res.data.records",
          queryMethod: "post",
          queryName: "planName",
          params: {
            label: "planName",
            value: "planName",
          },
        },
        {
          title: "点检级别",
          key: "planLevel",
          type: "select",
          dicData: [
            { label: "一级点检", value: "一级点检" },
            { label: "二级点检", value: "二级点检" },
            { label: "三级点检", value: "三级点检" },
          ],
        },
        {
          title: "设备等级",
          key: "deviceGrade",
          type: "select",
          dicData: [
            { label: "A类", value: "A" },
            { label: "B类", value: "B" },
            { label: "C类", value: "C" },
          ],
        },
        {
          title: "设备类别",
          key: "deviceCategory",
          type: "select",
          dicUrl: "/dms/faultCategory/dictList?name=设备类别",
          params:{
            label:'value',
            value:'value'
          }
        },
        {
          title: "设备名称",
          key: "deviceName",
        },
        {
          title: "设备编号",
          key: "deviceNo",
        },
       
        {
          title: "点检人",
          key: "operName",
          type: "search",
          dicUrl: "/basic/user/searchUser",
          queryName: "key",
          queryParams: {
            pageSize: 99,
            pageNum: 1,
          },
          resultParams: "res.data",
          params: {
            label: "realname",
            value: "realname",
          },
        },
        // {
        //   title: "是否过期",
        //   key: " ",
        //   type: "select",
        //   dicData: [
        //     { value: 1, label: "是" },
        //     { value: 2, label: "否" },
        //   ],
        // },
        {
          title: "是否异常",
          key: "isAbnormal",
          type: "select",
          dicData: [
            { value: '是', label:'是' },
            { value: "否", label: "否" },
          ],
        },
        {
          title: "设备流水号",
          key: "deviceMId",
          dicUrl: "/dms/device/page",
          queryParams: {
            pageNum: 1,
            pageSize: 10,
          },
          type: "search",
          resultParams: "res.data.records",
          queryMethod: "post",
          queryName: "deviceMId",
          params: {
            label: "deviceMId",
            value: "deviceMId",
          },
        },
        {
          title: "点检单号",
          key: "id",
        },
        {
          title: "任务日期",
          key: "time",
          format: "yyyy-MM-dd HH:mm:ss",
          type: "datetimerange",
          span:8,
        },
      ],
      deviceMIdList: [],
      deviceTypeList: [],
      caseStatus: false,
      caseEndReason: "",
      caseText: "",
      levelList: [
        { name: "一级点检", key: 1 },
        { name: "二级点检", key: 2 },
        { name: "三级点检", key: 3 },
      ],
      companyList: [],
      delStatus: 0,
      delId: "",
      dispatchId: "",
      dispatchStatus: 0,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      delFaultCodeShowF: false, //是否显示删除弹窗
      allotVisible: false, //是否显示删除弹窗
      detailVisible: false,
      loading: false,
      delLoading: false,
      searchParams: {},
      detailObj: {},
      ids: [],
      pageSizeOption: [10, 20, 30, 40],
      list: [],
      planList: [],
      category: [
        // {name: '未分配', key: '0'},
        // {name: '未完成', key: '1'},
        // {name: '待确认', key: '2'},
        // {name: '已完成', key: '3'},
        // {name: '已过期', key: '4'},
        // {name: '已结案', key: '5'},
        { name: `${this.$t("maintenance.Tobeallocated")}`, key: 0 },
        { name: `${this.$t("maintenance.Tobemaintained")}`, key: 1 },
        { name: `${this.$t("maintenance.Undermaintenance")}`, key: 2 },
        { name: `${this.$t("maintenance.Tobeconfirmed")}`, key: 3 },
        { name: `${this.$t("maintenance.Statement")}`, key: 4 },
        { name: `${this.$t("maintenance.Expired")}`, key: 5 },
      ],
      resultStatusList: [
        { key: 1, name: "正常" },
        { key: 2, name: "异常" },
      ],
      cycle: [
        { name: "定期点检", key: "1" },
        { name: "计数", key: "2" },
        { name: "计时", key: "3" },
      ],
      position: [{ name: "全部", key: "" }],
      classification: [{ name: "全部", key: "" }],
      columns: [
        {
          key: "selection",
          type: "selection",
          minWidth: 60,
          align: "center",
          resizable: true,
        },
        {
          title: `${this.$t("maintenance.TaskStatus")}`,
          key: "status",
          minWidth: 180,
          align: "center",
          tooltip: true,
          resizable: true,
          render: (h, params) => {
              return h("div", [
                h(
                  "span",
                  statusList.find((val) => val.value == params.row.status)
                    .label
                ),
              ]);
          },
        },
        {
          title: "点检计划",
          key: "planName",
          minWidth: 160,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t("common.Installation")}`,
          key: "installPositionStr",
          minWidth: 160,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t("设备等级")}`,
          key: "deviceGrade",
          minWidth: 120,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t("设备类别")}`,
          key: "deviceCategory",
          minWidth: 120,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t("maintenance.EquipmentName")}`,
          key: "deviceName",
          minWidth: 160,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t("maintenance.EquipmentNo")}`,
          key: "deviceNo",
          minWidth: 140,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t("maintenance.MaintenanceLevel")}`,
          key: "planLevel",
          minWidth: 160,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t("maintenance.TriggerInterval")}`,
          key: "intervalRate",
          minWidth: 140,
          align: "center",
          tooltip: true,
          resizable: true,
          render: (h, params) => {
              return h("div", [
                h(
                  "span",
                  params.row.planWorkhours+params.row.cycleUnit
                ),
              ]);
          },
        },
        {
          title: `${this.$t("maintenance.TaskStartTime")}`,
          key: "createTime",
          minWidth: 160,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t("maintenance.TaskEndTime")}`,
          key: "taskEndTime",
          minWidth: 160,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: "点检开始时间",
          key: "beginTime",
          minWidth: 200,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: "点检结束时间",
          key: "endTime",
          minWidth: 180,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t("点检时长(min)")}`,
          key: "taskLength",
          align: "center",
          minWidth: 220,
          tooltip: true,
          resizable: true,
        },
        // {
        //   title: `${this.$t('处理时长(min)')}`,
        //   key: 'dualSeconds',
        //   align: 'center',
        //   minWidth: 180,
        //   tooltip: true,
        // },
        {
          title: `${this.$t("标准工时")}`,
          key: "planWorkhours",
          minWidth: 150,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: "点检人",
          key: "operName",
          minWidth: 140,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t("maintenance.ConfirmedBy")}`,
          key: "affirmName",
          minWidth: 140,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: "协助点检人",
          key: "helpName",
          minWidth: 140,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t("maintenance.ConfirmedTime")}`,
          key: "affirmTime",
          minWidth: 160,
          align: "center",
          tooltip: true,
          resizable: true,
        },
        {
          title: `${this.$t("是否异常")}`,
          key: "resultStatus",
          minWidth: 100,
          resizable: true,
          tooltip: true,
          align: "center",
          render: (h, params) => {
            if (Number(params.row.resultStatus) > 0) {
              return h("div", [
                h(
                  "span",
                  this.resultStatusList.find(
                    (val) => val.key == params.row.resultStatus
                  ).name
                ),
              ]);
            } else {
              return h("div", [h("span", "")]);
            }
          },
        },
        {
          title: `${this.$t("common.operation")}`,
          slot: "action",
          minWidth: 150,
          align: "center",
          fixed: "right",
        },
      ],
      data: [],
      centerList: [
        { label: "A类", value: "A" },
        { label: "B类", value: "B" },
        { label: "C类", value: "C" },
      ],
      dateTimeRange: [],
      deviceNameList: [],
      tarGetcase: {},
      tarEnter: {},
    };
  },
  mounted() {
    this.getCompany();
  },
  methods: {
    getSearch(arg) {
      this.searchParams=JSON.parse(JSON.stringify(arg[0]))
      const {workShop,time}=this.searchParams;
      if (workShop && workShop.length > 0) {
        this.searchParams.workShop = workShop.at(-1);
      }else delete this.searchParams.workShop;
      if (time && time.length > 0) {
        this.searchParams.beginTimeS = time[0];
        this.searchParams.beginTimeE = time[1];
      }
      delete this.searchParams.time;
      this.searchList();
    },
    debounceSerach(fn, delay) {
      let _this = this;
      return function f(...args) {
        if (_this.timeID) {
          clearTimeout(_this.timeID);
        }
        _this.timeID = setTimeout(() => {
          fn(args);
        }, delay);
      };
    },
    handleRemote(query) {
      if (!query) {
        return;
      }
      const fn = this.debounceSerach(() => {
        let _query = query.split("-");
        if (Array.isArray(_query)) _query = _query[0];
        this.axios({
          method: "get",
          url: "/dms/dmsDevice/deviceList",
          params: {
            deviceMId: _query,
            deviceNo: "",
            assetsNo: "",
            orgCode: this.searchParams.orgCode || "",
          },
        }).then((res) => {
          if (res.code === 200) {
            this.deviceMIdList = res.data.map((item) => {
              item.desc =
                item.deviceMId + "-" + item.deviceName + "-" + item.deviceNo;
              return item;
            });
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        });
      }, 300);
      fn();
    },
    //获取故障数据
    getFaultCategory(name) {
      this.axios({
        method: "get",
        url: "/dms/faultCategory/basicDict",
        params: { name },
      }).then((res) => {
        if (name === "设备类型") {
          this.deviceTypeList = res.data.map((item) => {
            if (item.value) return item;
          });
        }
      });
    },
    handleCasChange(val) {
      this.searchParams.orgCode = val[val.length - 1];
    },
    caseOk() {
      if (!this.caseEndReason) {
        this.$Message.warning({
          content: "请输入结案原因",
          duration: 4,
          closable: true,
        });
        return;
      }
      const data = {
        caseEndReason: this.caseEndReason,
        ids: [],
      };
      if (this.ids && this.ids.length) {
        data.ids = this.ids;
      }
      if (this.tarGetcase.id) {
        data.ids = [this.tarGetcase.id];
      }
      this.axios({
        method: "post",
        url: "/dms/dcmMaintainTask/finishCase",
        data,
      }).then((res) => {
        if (res.code == 200) {
          this.changeNum();
          this.caseStatus = false;
          this.$Message.success({
            content: "结案成功",
            duration: 4,
            closable: true,
          });
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 4,
            closable: true,
          });
        }
      });
    },
    getDeviceNameList(deviceName) {
      this.axios({
        method: "get",
        url: "/dms/dcmMaintainItem/selectDeviceNames",
        params: {
          deviceName,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.deviceNameList = res.data.map((val) => ({
            label: val,
            value: val,
          }));
        }
      });
    },
    getCompany() {
      this.axios({
        method: "get",
        url: "/basic/company/getCompanyListByUser",
      }).then((res) => {
        if (res.code === 200) {
          this.companyList = res.data;
        }
      });
    },
    getCenterList(query) {
      if (query !== "") {
        this.loading = true;
        this.axios({
          method: "get",
          url: "/dms/dcmMaintainDetail/queryPlans",
          params: {
            planName: query,
          },
        })
          .then((res) => {
            if (res.code === 200) {
              this.planList = res.data;
            } else {
              this.$Message.warning({
                content: res.msg,
                duration: 6,
                closable: true,
              });
            }
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        this.planList = [];
      }
    },
    getDeviceList() {
      this.axios({
        method: "get",
        url: "/dms/dmsCategory/getSelectList",
        params: {},
      }).then((res) => {
        if (res.code === 200) {
          this.centerList = res.data;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    handleRangeChange(val) {
      this.searchParams.taskTimeBegin = val[0];
      this.searchParams.taskTimeEnd = val[1];
    },
    tabsClick(name) {
      // if (name === 0) {
      //     this.$refs.productConfigComponent.searchBtn();
      // } else  if (name === 1){
      //     console.log(this.$$refs);
      //     this.$refs.boxConfigComponent.searchBtn();
      // }else{
      //     this.$refs.shfitconfigComponent.searchBtn();
      // }
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    reset() {
      this.$refs.Cascader.value = [];

      this.dateTimeRange = [];
      this.pageNum = 1;
      this.searchParams = {};
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    searchList() {
      if (!this.searchParams.operater) {
        delete this.searchParams.operater;
      }
      if (!this.searchParams.deviceNo) {
        delete this.searchParams.deviceNo;
      }
      let data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchParams,
      };
      // for (let key in this.searchParams) {
      //     if (key === 'orgCode' && this.searchParams['orgCode']) {
      //         const arr = this.searchParams[key]
      //         const {length, last = length - 1} = arr
      //         this.$set(data, key, arr[last])
      //     } else {
      //         if (this.searchParams[key]) {
      //             this.$set(data, key, this.searchParams[key])
      //         }
      //     }
      //
      // }
      this.axios({
        method: "post",
        url: "/dms/devSpotCheckTask/querySpotCheckTaskList",
        data,
      }).then((res) => {
        if (res.code === 200) {
          this.data = res.data.records;
          this.total = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    exportMaintainTask() {
      let data = {
        ids: this.ids,
      };
      for (let key in this.searchParams) {
        if (this.searchParams[key]) {
          this.$set(data, key, this.searchParams[key]);
        }
      }
      const filName = "点检任务";
      this.axios({
        method: "post",
        url: "/dms/dcmMaintainTask/export",
        responseType: "blob",
        data,
      }).then((res) => {
        fileDownload(res, filName + ".xlsx");
      });
    },
    onSelectChange(selection) {
      let arr = [];
      selection.map((item) => {
        arr.push(item.id);
      });
      this.ids = arr;
    },
    edit(row) {
      row.status = 4;
      row.taskId = row.id;
      this.$store.commit("detail/SET_DATING", row);
      // this.getManagementDetail(row.id)
      this.$router.push({
        path: "/devScene/deviceSpotCheck/management/detail",
      });
    },
    getManagementDetail(id) {
      this.axios({
        method: "get",
        url: "/dms/dcmMaintainTask/queryById",
        params: {
          id,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.detailObj = res.data;
          this.detailObj.taskId = id;
          this.detailVisible = true;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    changeDetailVisible(flag) {
      this.detailVisible = flag;
    },
    //删除
    deleteRow(row) {
      //点击展示提示删除弹窗
      this.delStatus = 0;
      this.delId = row.id;
      this.delFaultCodeShowF = true;
    },
    handleBatchDelete() {
      this.delStatus = 1;
      this.delFaultCodeShowF = true;
    },
    deleteOk() {
      this.delLoading = true;
      if (this.delStatus == 0) {
        this.axios({
          method: "POST",
          url: "/dms/devSpotCheckTask/delTaskByIds",
          data: [this.delId],
        })
          .then((res) => {
            if (res.code === 200) {
              this.searchList();
              this.$Message.success({
                content: "删除成功！",
                duration: 2,
                closable: true,
              });
            } else {
              this.$Message.warning({
                content: res.msg,
                duration: 6,
                closable: true,
              });
            }
          })
          .finally(() => {
            this.delFaultCodeShowF = false;
            this.delLoading = false;
          });
      } else {
        this.axios({
          method: "POST",
          url: "/dms/devSpotCheckTask/delTaskByIds",
          data: this.ids,
        })
          .then((res) => {
            if (res.code === 200) {
              this.searchList();
              this.$Message.success({
                content: "批量删除成功！",
                duration: 2,
                closable: true,
              });
            } else {
              this.$Message.warning({
                content: res.msg,
                duration: 6,
                closable: true,
              });
            }
          })
          .finally(() => {
            this.delFaultCodeShowF = false;
            this.delLoading = false;
          });
      }
    },
    //分配
    allot(row) {
      // this.allotVisible = true;
      this.dispatchId = row.id;
      this.dispatchStatus = 0;
      this.$refs.signleCommonModal.show({}, 2);
    },
    handleBatchDispatch() {
      if (!this.ids.length) {
        this.$Message.warning({
          content: `${this.$t("common.deleteItems")}`,
          duration: 6,
          closable: true,
        });
        return;
      }
      let arr = this.data
        .filter((item) => this.ids.includes(item.id))
        .filter((x) => x.taskStatus != 0);
      if (arr.length) {
        this.$Message.warning({
          content: "当前任务已分配点检人,不可重复分配!",
          duration: 6,
          closable: true,
        });
        return false;
      }
      this.dispatchStatus = 1;
      this.$refs.signleCommonModal.show({}, 2);
    },
    handleRefresh(userIds) {
      if (this.dispatchStatus == 0) {
        this.axios({
          method: "post",
          url: "/dms/dcmMaintainTask/distribute",
          data: {
            id: this.dispatchId,
            operateEmpno: userIds.toString(),
          },
        }).then((res) => {
          if (res.code === 200) {
            this.searchList();
            this.$Message.success({
              content: "分配成功！",
              duration: 2,
              closable: true,
            });
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        });
      } else {
        this.axios({
          method: "post",
          url: "/dms/dcmMaintainTask/batchDistribute",
          data: {
            ids: this.ids.toString(),
            operateEmpno: userIds.toString(),
          },
        }).then((res) => {
          if (res.code === 200) {
            this.searchList();
            this.$Message.success({
              content: "批量分配成功！",
              duration: 2,
              closable: true,
            });
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="scss">
.search-form {
  .ivu-form-item-label {
    padding-bottom: 0;
  }
  .search-form_item {
    padding: 0 5px;
  }
}
.contentBox {
  .title::before {
    content: "*";
    color: red;
  }

  .title {
    display: inline-block;
    font-size: 15px;
    margin-bottom: 6px;
  }
}

.project {
  background: #ffffff;
  height: calc(100vh - 150px);

  .title {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    padding: 10px;
    border-bottom: 1px solid #dddddd;

    .icon {
      display: flex;

      .creatBtnright {
        display: flex;
        align-items: center;
        font-size: 16px;

        i {
          font-size: 36px;
        }
      }
    }
  }

  .tab {
    height: calc(100% - 100px);

    .ivu-tabs-bar {
      padding-left: 30px;
    }

    .ivu-tabs-tab {
      font-size: 18px;
    }
  }
}

.addModal {
  .addProject {
    .modalTitle {
      position: relative;

      span {
        font-weight: bold;
        font-size: 20px;
      }

      .label {
        display: flex;
        flex-wrap: wrap;

        .item {
          display: flex;

          label {
            width: 150px;
            height: 100%;
            background: #f5f6f7;
          }

          & > div {
            width: 330px;
          }
        }

        .cycle {
          display: flex;

          .ivu-form-item-label {
            width: 150px;
            height: 100%;
            background: #f5f6f7;
          }

          .ivu-form-item-content {
            border: 1px solid #eeeeee;
            width: 800px;

            .ivu-checkbox-wrapper {
              margin-left: 30px;
            }
          }
        }
      }
    }

    .modalTitle::before {
      content: "";
      position: absolute;
      width: 3px;
      height: 20px;
      top: 5px;
      left: -10px;
      background: #187bdb;
    }

    .tab {
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .icon {
        border: 1px solid #187bdb;
        border-radius: 30px;
        padding: 5px 20px 5px 20px;
        display: flex;
        align-items: center;
        margin-left: 20px;
        color: #187bdb;

        i {
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
